<template>

  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo" />
      <a-menu theme="dark" mode="inline" :default-selected-keys=[$route.path]>
        <a-menu-item key="/mybackuser" >
          <a-icon type="user" />
          <span>用户管理</span>
          <router-link to="/mybackuser"/>
        </a-menu-item>
        
        <a-menu-item key="/look" >
          <a-icon type="video-camera" />
          <span>用户详情</span>
           
          <router-link to="/look"/>
          
        </a-menu-item>
        <a-menu-item key="qx">
          <a-icon type="upload" />
          <span>权限修改</span>
          <router-link to="/qx"/>
        </a-menu-item>
        <a-menu-item key="/gongdan" >
          <a-icon type="video-camera" />
          <span>工单管理</span>
           
          <router-link to="/gongdans"/>
          
        </a-menu-item>
        <a-menu-item key="/gongdanadd" >
          <a-icon type="video-camera" />
          <span>工单添加</span>
           
          <router-link to="/gongdanadd"/>
          
        </a-menu-item>
        <a-menu-item key="/gongdanget" >
          <a-icon type="video-camera" />
          <span >工单展示</span>
           
          <router-link to="/gongdanget"/>
          
        </a-menu-item>
        <a-badge :count="pid">
          <router-link to="/gongdanget" class="head-example">消息</router-link>
        </a-badge>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
      </a-layout-header>
      <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>

const columns = [
    {
      title: '用户ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '用户名',
      dataIndex: 'username',
      // key: 'username',
    },
    {
      title: '密码',
      dataIndex: 'password',
      // key: 'password',
    },
];
import axios from 'axios'
export default {
  data() {
    return {
      collapsed: false,
      data:[],
      defaulted:["1"],
      columns,
      uid : sessionStorage.getItem('uid'),
      node:'',
      data:[],
      pid:null
    }
  },
   //接收参数
  props:['menu_number'],
    methods:{
    messagebox(){
      axios({
        url:'http://127.0.0.1:8000/message/',
        method:'get',
        params:{
          pid:sessionStorage.getItem('uid')
        }
      }).then(resp=>{
        console.log(resp.data)
        this.pid = resp.data
      })
    },
  },
  created(){
    this.messagebox()
  }

};
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>